<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>购买大厅</title>
  <link rel="shortcut icon" href="../rent.ico" type="image/x-icon" />
  <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.css" rel="stylesheet">
  <link rel="stylesheet" href="../public/libs/vant.css">
  <link rel="stylesheet" href="../public/libs/app.css">
  <link rel="stylesheet" href="../public/css/xitong.css">

</head>
<style>
  [v-cloak] {
    display: none;
  }
  header {
    color: #fff;
  }

  input {
    border: none;
    box-shadow: 1px 1px 5px #ccc;
  }

  .right {
    border: 1px solid #2db7f5;
    background: #2db7f5;
    color: #ffffff;
    border-radius: 5px;
    font-size: 14px;
    width: 100px;
    height: 30px;
  }

  .kefu {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    /* margin-left: 20%; */
    width: 80px;
    left: 26% !important;
  }

  .pz {
    font-size: 12px;
  }

  .code_p {
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    width: 100%;
  }
  .code{
    padding-top: 50px;
    text-align: center!important;
  }
  .code_p2{
    font-size: 18px;

    text-align: center;

  }

  /**/
  .option{
    /*用div的样式代替select的样式*/
    margin: 100px;
    width: 140px;
    height: 40px;
    /*border-radius: 5px;*/
    /*盒子阴影修饰作用,自己随意*/
    /* box-shadow: 0 0 5px #ccc;*/
    border: 1px solid #cccccc;
    position: relative;
  }
  .option select{
    /*清除select的边框样式*/
    border: none;
    /*清除select聚焦时候的边框颜色*/
    outline: none;
    /*将select的宽高等于div的宽高*/
    width: 100%;
    height: 40px;
    line-height: 40px;
    /*隐藏select的下拉图标*/
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*通过padding-left的值让文字居中*/
    padding-left: 20px;
  }
  /*使用伪类给select添加自己想用的图标*/
  .option:after{
    content: "";
    width: 14px;
    height: 8px;
    /*background: url(../assets/arrow-down.png) no-repeat center;*/
    /*通过定位将图标放在合适的位置*/
    position: absolute;
    right: 20px;
    top: 41%;
    /*给自定义的图标实现点击下来功能*/
    pointer-events: none;
  }
</style>

<body>
  <div id="app" v-cloak>
    <header>
      <div class="header-top">
        <a onclick="javascript:window.history.back();">
          <img src="../public/img/fanhui_left.png" alt="">
        </a>
        <span>购买大厅</span>

        <span @click="gmjl()">查询我的订单</span>
        <span class="kefu" @click="kefu()">帮助中心</span>
      </div>
    </header>

    <main>
      <ul>
        <li v-for="(item,item_index) in list">
          <div class="left">
            <p class="tit">
              <span>{{item[0].accountType}}</span>
            </p>
            <p>购买天数：

                <select name="" :id="item_index" @change="changeTian(item_index)" class="">
                  <option value="-1">请选择天数</option>
                  <option v-for="(i,index) in item" :value="index">{{i.invitationDays}}天</option>
                </select>

            </p>
            <p :class="item_index+'j'"> 价格：{{item[0].buyMoney}}元</p>
            <p :class="item_index+'x'"> 库存：{{item[0].repertory}}</p>
            <input type="text" placeholder="输入您的手机号作为凭证" :id="item_index+'pz'" class="pz">
          </div>
          <div class="right">
            <span @click="zfb(item_index)">支付宝支付</span>
            <!-- <span @click="wx(item_index)">微信支付</span> -->
          </div>
        </li>
      </ul>
      <!-- <div class="code" v-show="code_show">
        <p>扫码支付</p>
        <div class="code_e"></div>
      </div> -->
      <!-- <div v-show=>

      </div> -->
      <van-popup v-model="show" closeable position="center" :style="{ height: '60%',width:'60%'}" />
      <p class="code_p">支付宝扫码支付</p>
      <div class="code"></div>
      <p class="code_p2">请在5分钟内完成支付</p>

      </van-popup>

    </main>
  </div>

  <script src="../public/libs/vue.min.js"></script>
  <script src="../public/libs/jquery-3.4.1.min.js"></script>
  <script src="../public/libs/vant.js"></script>
  <script src="../public/libs/jquery.qrcode.min.js"></script>
  <!-- <script src="../public/libs/md5.js"></script> -->
  <script src="../public/libs/app.js"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        tian: "1",
        list: [],
        buy_list: [],
        // code_show: true,//遮罩
        show: false,
        // voucher:"",//凭证
      },
      filters: {
        priceFilter: function (value) {
          // return 6
          // console.log(value);
          vm.buy_list.forEach(item => {
            // console.log(item.buyid);
            // console.log(value);
            if (value == item.buyid) {
              // console.log(1);
              console.log(item.price);
              return 'item.price'
            }
          });
        }
      },
      mounted: function () {
        this.init();
      },
      methods: {
        init: function () {
          $.ajax({
            method: 'get',
            url: app.webUrl + '/Invitation/selbuyAccount',
            contentType: false,
            processData: false,
            success: function (ret) {
              console.log(ret);
              for (a in ret.data) {
                vm.list.push(ret.data[a]);
              }
              vm.list.forEach(item => {
                item.forEach(i => {
                  vm.buy_list.push(i)
                })
              });
            }
          });
          //
          // setTimeout(() => {
          //   jQuery('.code').qrcode({
          //   render: "canvas", //也可以替换为table
          //   width: 20,
          //   height: 90,
          //   text: '666'
          // });
          // }, 2000);

        },
        gmjl: function () {
          window.location.href = "gmjl.html"
        },
        kefu: function () {
          window.location.href = "kefu.html"
        },
        changeTian: function (item_index) {
          // this.tian = document.getElementById(item_index).value;
          var a = document.getElementById(item_index).value;
          // console.log(this.list[item_index][a].price);
          // console.log(document.getElementsByClassName(item_index+"j"));
          $("." + item_index + "j")[0].innerHTML = "价格：" + this.list[item_index][a].buyMoney + "元";
          $("." + item_index + "x")[0].innerHTML = "库存：" + this.list[item_index][a].repertory

          // $("."+item_index).val(this.list[item_index][a].price)
          // document.getElementsByClassName(item_index).value=this.list[item_index][a].price;
          // console.log(this.tian);
        },
        //
        // show_code: function (item_index) {
        // },
        zfb: function (item_index) {


          var pz = document.getElementById(item_index + 'pz').value
          if (pz == "") {
            app.text_show("请输入凭证");
            return
          }
          if (pz.length < 6) {
            app.text_show("请输入六位数以上凭证");
            return
          }
          var day = document.getElementById(item_index).value;
          // console.log("day"+day)
          if(day=="-1"){
            app.text_show("请输选择天数");
            return;
          }
          var data = this.list[item_index][day];
          var pz = document.getElementById(item_index + 'pz').value
          console.log(data);
          this.zf(data, pz)
        },
        wx: function (item_index) {
          var pz = document.getElementById(item_index + 'pz').value
          if (vm.voucher == "") {
            app.text_show("请输入凭证");
            return
          }
          return
          if (pz.length < 6) {
            app.text_show( "请输入六位数以上凭证");
            
            return
          }
          var day = document.getElementById(item_index).value;
          var data = this.list[item_index][day];
          this.zf(data, pz)

        },
        zf: function (data, pz) {
          $.ajax({
            url: app.webUrl + '/Invitation/pay',
            data: {
              AccountType: data.accountType,
              BuyMoney: data.buyMoney,
              InvitationDays: data.invitationDays,
              Voucher: pz,
            },
            type: 'post',
            success: function (ret) {
              if (ret.status == 1) {
                var data = JSON.parse(ret.data)
                console.log(data);

                vm.show = "true"
                setTimeout(() => {
                  $('.code').html("");

                  jQuery('.code').qrcode({
                    render: "canvas", //也可以替换为table
                    width: 150,
                    height: 150,
                    text: data.alipay_trade_precreate_response.qr_code
                  });
                }, 100);
                
                var time=setInterval(() => {
                  $.ajax({
                  method: 'get',
                  url: app.webUrl + '/Invitation/return',
                  data:{
                    InvitationCode:data.alipay_trade_precreate_response.out_trade_no
                  },
                  success: function (ret) {
                    var data2=JSON.parse(ret)
                    console.log(data2);
                    
                    if(data2.alipay_trade_query_response.buyer_pay_amount!=0.00){
                      clearInterval(time)
                      window.location.href = "gmjl.html?&pz=" + pz;
                    }
                  }
                });
                }, 10000);
                setTimeout(() => {
                  clearInterval(time)
                }, 1000*60*3);
                

                // vant.Toast({ message: "购买成功", position: "bottom" })
                // setTimeout(() => {
                //   window.location.href = "gmjl.html?&pz=" + pz;
                // }, 1000);
              }
            }
          })
        },
      },
    });
  </script>
</body>

</html>